/*
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-04-01 13:16:39
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-11 16:00:12
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\financetable\\pillar\\pillar.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { Chart } from '@antv/g2';
import { DataService } from 'src/app/routes/datatable/services/data.service';
@Component({
  selector: 'app-financetable-pillar',
  templateUrl: './pillar.component.html',
  styleUrls: ['./pillar.component.less']
})
export class FinancetablePillarComponent implements OnInit, OnChanges {
  el: any;
  @Input() chartData: any;
  chart: any;
  constructor(private service: DataService, private ngZone: NgZone) {

  }
  ngOnChanges(changes: SimpleChanges): void {
    if (this.chartData) {
      // setTimeout(()=>{
      //   this.chart.render(true)
      // }, 1000)

    }
  }

  ngOnInit(): void {

  }
  reRender() {
    setTimeout(() => {
      this.chart.data(this.chartData);
      console.log(this.chartData)
      this.chart.render();
    }, 1000)
  }
  render(el: ElementRef<HTMLDivElement>): void {
    this.el = el.nativeElement
    setTimeout(() => {
    this.ngZone.runOutsideAngular(() => this.init(this.el));
    },1000)
  }

  private init(el: HTMLElement): void {
    this.chart = new Chart({
      container: el,
      autoFit: true,
      height: 500,
    });

    this.chart.data(this.chartData);

    this.chart.scale('number', {
      nice: true,
      // ticks: 
    });
    this.chart.tooltip({
      showMarkers: false,
      shared: true,
    });
    this.chart.axis('number', {
      label: {
        formatter: (val: any) => {
          return  '¥' +  this.toThousands(val) ;
        },
      },
    });
    this.chart
      .interval()
      .position('time*number')
      .color('name')
      .adjust([
        {
          type: 'dodge',
          marginRatio: 0,
        },
      ]);

    this.chart.interaction('active-region');

    this.chart.render();
  }
 toThousands(num: string) {
    const str = num.toString()
    return str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  }
}